<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Webpack Sample Project and es6 start</title>
</head>
<body>
<div id='root'>

</div>
<script src="bundle.js"></script>
<script>
	'use strice'
	//String.fromCodePoint() 将Unicode码转成文字
	var text1 = String.fromCodePoint(0x20BB7);

	// for in 打印的是key
	// for of 打印的是值
	var text = ["q", "w", "e", "r", "t", "a"];
	for (let key in text) {
		console.log(key);
	}
	for (let val of text) {
		console.log(val);
	}
	// repeat方法返回一个新字符串，表示将原字符串重复n次。
	let rep = "hello".repeat(3); //如果是小数，自动取整
	console.log(rep) //hellohellohello

	// trim函数   去掉首尾空格和换行
	var aa = "     123     66 6     ";
	aa = aa.trim();
	console.log(aa)

	// let str = '(name) => `Hello ${name}!`';
	// let func = eval.call(null, str);
	// func('Jack') // "Hello Jack!"


	let str = '(name) => `${name}`';
	let func = eval(str);
	console.log(func(32))

	// 打印``中的表达式
	var aa1 = `${aa}`;

	// 正则表达式
	var regex = new RegExp('xyz', 'i');
	// 等价于
	var regex = /xyz/i;
	// match()、replace()、search()和split()，四种字符串的正则方法

	// 箭头函数，如果返回值是对象，需要在外层加括号，否则报错
	let getTempItem = id => ({ id: id, name: "Temp" });

	const headAndTail = (head, ...tail) => [head, tail];
	headAndTail(1, 2, 3, 4, 5)  // [1,[2,3,4,5]]

	// async function getStockPriceByName(name){
	// 	const symbol = await getStockSymbol(name);
	// 	return symbol;
	// }
	// getStockPriceByName('goog').then(function (result) {
	// 	console.log(result);
	// });
	// function getStockSymbol(){
	// 	console.log(666)
  // }
  
  // async会返回一个Promise对象
  // Promise.reject是错误信息
  // Promise.resolve是正确信息
  // 有多个async可以统一放在try...catch中，防止报错后不能继续执行后续的操作
  async function f() {
    try {
      await Promise.reject('出错了');
    } catch(e) {
    }
    return await Promise.resolve('hello world');
  }

  f().then(v => console.log(v))
  // hello world

  // 实现3次重连，try后面如果报错直接进入catch不经过break，不报错就break
  async function test() {
    let i;
    for (i = 0; i <3; ++i) {
      try {
        await Promise.reject('出错了');
        break;
      } catch(err) {
        console.log(666)	
      }
    }
    console.log(i); // 3
  }
  test();

	async function box(){
		// 同时触发多个异步请求
		// 写法一
			let [foo, bar] = await Promise.all([getFoo(), getBar()]);

		// 写法二
			let fooPromise = getFoo();
			let barPromise = getBar();
			let foo = await fooPromise;
			let bar = await barPromise;
		// await命令只能用在async函数之中，如果用在普通函数，就会报错。
	}

	// ES5的合并数组
	var arr1 = [1,2];
	var arr2 = [3,4];
	var arr3 = [5,6]
	arr1.concat(arr2, arr3);
	// [ 'a', 'b', 'c', 'd', 'e' ]

	// ES6的合并数组
	[...arr1, ...arr2, ...arr3]
	// [ 'a', 'b', 'c', 'd', 'e' ]


	// Object.assign 对象合并
	var a = {a:1,b:2}
	let aClone = { ...a };
	// 等同于
	let aClone2 = Object.assign({}, a);
	// Object.assign 对象合并
	var aa = {a:1,b:2}
	bb = {r:5,t: 9}
	Object.assign(aa,bb)

	// Object.keys()   返回对象的属性名称
	Object.keys(aa);
	// [a,b]

	// 属性的遍历
// ES6 一共有 5 种方法可以遍历对象的属性。

// （1）for...in

// for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

// （2）Object.keys(obj)

// Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

// （3）Object.getOwnPropertyNames(obj)

// Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

// （4）Object.getOwnPropertySymbols(obj)

// Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

// （5）Reflect.ownKeys(obj)

// Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40
// 上面代码将proto对象设为obj对象的原型，所以从obj对象可以读取proto对象的属性。

var pro = {};
var obj1 = {x: 1};
obj1.__proto__ = pro;
pro.y = 6;
console.log(obj1.y)

// 我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

// 对象遍历
// Object.keys()、Object.values()、Object.entries
// ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj2 = { foo: 'bar', baz: 42 };
Object.keys(obj2)
// ["foo", "baz"]

// Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

Object.values(obj2)
// ["bar", 42]

// Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
Object.entries(obj2)
// [ ["foo", "bar"], ["baz", 42] ]
</script>
</body>
</html>